<template>
    <div>
        <h1>组合式API函数之computed</h1>
        <h2>总和 {{ total }} </h2>
        <button @click="handler">点击我修改total</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

//响应式数据购物车
const goodsArr = ref([
    { id: 1, skuName: '水杯', price: 27, skuNum: 2 },
    { id: 2, skuName: '衣服', price: 37, skuNum: 20 },
    { id: 3, skuName: '手机', price: 1999, skuNum: 1 },
    { id: 4, skuName: '鼠标', price: -6, skuNum: 10 }
])

//计算属性
//第一种写法:computed函数执行,需要传递一个回调(回调函数执行:保证计算出来的数据在模版当中使用)
//回调函数返回的结果即为computed函数执行返回的结果(Ref对象的value属性值)
const total = computed(() => {
    //定义sum  
    return goodsArr.value.reduce((prev: any, next: any) => {
        prev += next.price * next.skuNum;
        return prev;
    }, 0)
});

const handler = () => {
    //computed第一种写法计算出来的ref对象的value属性值->只读的get,没有set！！！
    //  total.value ++; 这种写法不可以的,因为computed当前这种写法计算出来的Ref对象的value属性值只读的!!!

}



</script>



<script>




